export interface Article {
  id: number
  title: string
  content: string
  category: string
  tags: string[]
  createTime: string
  updateTime: string
}

export const articles: Article[] = [
  {
    id: 1,
    title: 'Vue3 组合式 API 最佳实践',
    content: `# Vue3 组合式 API 最佳实践

## 什么是组合式 API？

组合式 API 是 Vue 3 中新增的一种编写组件逻辑的方式。它允许我们使用函数的方式来组织代码，使得代码更容易复用和维护。

## 为什么需要组合式 API？

1. 更好的代码组织
2. 更强的类型推导
3. 更小的打包体积
4. 更好的性能

## 基本用法

\`\`\`js
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return {
      count
    }
  }
}
\`\`\`

## 生命周期钩子

- onMounted
- onUpdated
- onUnmounted
- onBeforeMount
- onBeforeUpdate
- onBeforeUnmount

## 响应式系统

Vue 3 的响应式系统基于 Proxy，提供了更好的性能和更强大的功能。

### ref

用于基本类型的响应式。

### reactive

用于对象的响应式。

## 最佳实践

1. 使用组合式函数抽取可复用的逻辑
2. 使用 TypeScript 提供更好的类型支持
3. 遵循单一职责原则
4. 合理使用计算属性和监听器`,
    category: '前端开发',
    tags: ['Vue3', 'JavaScript', '前端'],
    createTime: '2024-04-13',
    updateTime: '2024-04-13'
  },
  {
    id: 2,
    title: 'TypeScript 高级特性详解',
    content: `# TypeScript 高级特性详解

## 类型系统

TypeScript 提供了强大的类型系统，可以帮助我们在开发时捕获潜在的错误。

## 高级类型

### 联合类型

\`\`\`ts
type StringOrNumber = string | number;
\`\`\`

### 交叉类型

\`\`\`ts
type Combined = Type1 & Type2;
\`\`\`

### 泛型

\`\`\`ts
function identity<T>(arg: T): T {
  return arg;
}
\`\`\`

## 装饰器

TypeScript 支持装饰器语法，可以用于类、方法、属性等。

## 最佳实践

1. 使用严格的类型检查
2. 合理使用接口和类型别名
3. 避免使用 any
4. 使用类型断言要谨慎`,
    category: 'TypeScript',
    tags: ['TypeScript', 'JavaScript', '编程语言'],
    createTime: '2024-04-13',
    updateTime: '2024-04-13'
  }
] 